<template>
    <div class="digital-machine-build-container">
        <div class="dmb-left">
            <div class="dmb-left-title">
                数字样机拓扑结构
            </div>
            <DigitalMachinePaper class="dmb-left-paper" @nodeClick="handleNodeClick" @nodeRemove="handelNodeRemove">
            </DigitalMachinePaper>
        </div>
        <div class="dmb-right">
            <div class="dmb-right-title">
                <div class="right-title">节点属性</div>
                <div class="go-back" @click="goBack">
                    <i class="el-icon-back back-icon"></i>
                </div>
            </div>
            <template v-if="curSelectNodeId">
                <div class="dmb-right-attr">
                    <div v-if="isMasterNode">
                        <div class="flex margin-left-10">
                            <el-select size="mini" class="margin-left-10 margin-right-10 width100"
                                v-model="versionForm.mainVersionId" @change="handleChangeMainVersion"
                                :disabled="!mainVersionOptions.length > 0">
                                <el-option v-for="item in mainVersionOptions" :key="item.mainVersionId"
                                    :label="item.defaultVersion ? item.mainVersionName + '  ★' : item.mainVersionName"
                                    :value="item.mainVersionId">
                                </el-option>
                            </el-select>
                            <el-select size="mini" class="margin-right-10 width100"
                                v-model="versionForm.mainVersionState" @change="handleChangeMainVersionState"
                                :disabled="!mainVersionOptions.length > 0">
                                <el-option :label="$t('tool.modelManage.versionStatusSelect.developing')" :key="0"
                                    :value=0></el-option>
                                <el-option :label="$t('tool.modelManage.versionStatusSelect.haveReleased')" :key="1"
                                    :value=1></el-option>
                            </el-select>
                            <el-button v-if="versionForm.defaultVersion" size="mini" style="cursor: not-allowed;"
                                :disabled="!mainVersionOptions.length > 0">{{
                                    $t("tool.modelManage.isDefaultMainVersion")
                                }}</el-button>
                            <el-button v-else @click="setDefaultMainVersion" size="mini"
                                :disabled="!mainVersionOptions.length > 0">{{
                                    $t("tool.modelManage.setDefaultMainVersion")
                                }}</el-button>
                            <el-button @click="addMainVersion" size="mini">{{
                                $t("tool.modelManage.addMainVersion")
                                }}</el-button>
                            <el-button @click="showVersionStatistic" size="mini"
                                :disabled="!mainVersionOptions.length > 0">{{
                                    $t("tool.modelManage.versionStatistic")
                                }}</el-button>
                            <el-button class="jtyj-btn-cancel" size="mini" @click="handleDelMainVersion"
                                :disabled="!mainVersionOptions.length > 0">{{
                                    $t("setup.buttonText.delete")
                                }}</el-button>
                        </div>
                        <div style="width: 100%;margin-top: 10px;" v-if="mainVersionOptions.length >= 0">
                            <el-form ref="versionForm" :model="versionForm" :inline="true" label-width="75px"
                                style="width: 100%">
                                <el-form-item :label="$t('tool.modelManage.mainVersionId')">
                                    <el-input size="mini" disabled v-model="versionForm.mainVersionCode"></el-input>
                                </el-form-item>
                                <el-form-item :label="$t('tool.modelManage.mainVersionDescription')">
                                    <el-input type="textarea" size="mini" v-model="versionForm.mainVersionDescription"
                                        @change="handlechange"></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>

                    <div v-if="!isMasterNode">
                        <el-form ref="form" :model="form" label-width="40px"
                            style="display: flex; align-items: center; margin-left: 20px;">
                            <el-form-item label="名称">
                                <el-input v-model="form.name"></el-input>
                            </el-form-item>
                            <el-button class="jtyj-btn-primary" size="mini" style="margin-left: 20px;"
                                @click="updateNodeName">更新</el-button>
                        </el-form>
                    </div>

                </div>
                <div class="dmb-right-operate">
                    <div class="model-detail-middle-box" @click="dataModeling">
                        <img src="/images/data-modeling.png" alt="" />
                        <div class="btn-text model-btn-text">
                            {{ $t("tool.modelManage.dataModeling") }}
                        </div>
                    </div>
                    <div class="model-detail-middle-box" @click="dataReference">
                        <img src="/images/data-reference.png" alt="" />
                        <div class="btn-text model-btn-text">
                            {{ $t("tool.modelManage.dataReference") }}
                        </div>
                    </div>

                </div>
                <div class="dmb-right-model">
                    <!-- 参数化建模 -->
                    <div v-if="isMasterNode" class="parametricModeling">
                        <div style="margin-left: 10px;">
                            {{ $t("tool.modelManage.parametricModeling") }}
                        </div>
                        <div class="loc-end">
                            <el-button size="mini" @click="openParametricModeling()">{{
                                $t("setup.buttonText.new")
                                }}</el-button>
                        </div>
                        <div class="table-item-table">
                            <el-table :data="parametricModelingList">
                                <el-table-column align="center" type="index" :label="$t('tool.modelManage.indexNumber')"
                                    width="60">
                                </el-table-column>
                                <el-table-column align="center" prop="modelingCode"
                                    :label="$t('tool.modelManage.modelingCode')">
                                </el-table-column>
                                <el-table-column align="center" prop="chineseName"
                                    :label="$t('tool.modelManage.chineseName')">
                                </el-table-column>
                                <el-table-column align="center" prop="englishName"
                                    :label="$t('tool.modelManage.englishName')">
                                </el-table-column>
                                <el-table-column align="center" :label="$t('tool.others.controls')" width="200px">
                                    <template slot-scope="scope">
                                        <el-button :class="['margin-right-10', 'jtyj-button-text']" type="text"
                                            @click="openParametricModeling(scope.row)">
                                            {{ $t("setup.buttonText.edit") }}
                                        </el-button>
                                        <el-button :class="['margin-right-10', 'jtyj-button-text']" type="text"
                                            @click="deleteParametricModeling(scope.row)">
                                            {{ $t("setup.buttonText.delete") }}
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <!-- 模型动态链接库 -->
                    <div class="dll">
                        <div style="margin-left: 10px;">
                            {{ $t("tool.modelManage.minorVersionList") }}
                        </div>
                        <div class="loc-end">
                            <el-button size="mini" @click="downloadTemplate">{{
                                $t("setup.buttonText.downloadTemplate")
                                }}</el-button>
                            <el-button size="mini" @click="addDll">{{
                                $t("tool.modelManage.addDll")
                                }}</el-button>
                        </div>
                        <div class="table-item-table">
                            <el-table :data="dllOptions">
                                <el-table-column align="center" type="index" :label="$t('tool.modelManage.indexNumber')"
                                    width="60">
                                </el-table-column>
                                <el-table-column align="center" prop="dllNumber"
                                    :label="$t('tool.modelManage.dllNumber')">
                                </el-table-column>
                                <el-table-column align="center" prop="dllDescription"
                                    :label="$t('tool.modelManage.dllDescription')" :show-overflow-tooltip="true">
                                </el-table-column>
                                <el-table-column align="center" prop="dllFilePath"
                                    :label="$t('tool.modelManage.dllFilePath')" :show-overflow-tooltip="true">
                                    <template slot-scope="scope">
                                        <span class="file-path-btn" :title="$t('tool.others.placehoderUpload')"
                                            @click="handleUpload($event, 'dll', scope.row)">{{
                                                getFileName(scope.row.dllFilePath)
                                            }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" prop="codeFilePath"
                                    :label="$t('tool.modelManage.codeFilePath')" :show-overflow-tooltip="true">
                                    <template slot-scope="scope">
                                        <span class="file-path-btn" :title="$t('tool.others.placehoderUpload')"
                                            @click="handleUpload($event, 'code', scope.row)">{{
                                                getFileName(scope.row.codeFilePath)
                                            }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" :label="$t('tool.others.controls')" width="200px">
                                    <template slot-scope="scope">
                                        <el-button v-if="scope.row.defaultVersion" class="jtyj-button-text" type="text"
                                            style="margin-right: 10px;cursor: not-allowed;">{{
                                                $t("tool.modelManage.isDefaultDll") }}
                                        </el-button>
                                        <el-button v-else class="jtyj-button-text" type="text"
                                            style="margin-right: 10px" @click="setDefaultDll(scope.row)">{{
                                                $t("tool.modelManage.setDefaultDll") }}
                                        </el-button>
                                        <el-popover placement="bottom-start" title="" trigger="hover"
                                            :visible-arrow="false">
                                            <div class="dropdown-menu">
                                                <div class="menu-item mx-1" v-for="menu in getMenuList(scope.row)"
                                                    :key="menu.id" @click="handleMenuClick(menu)">
                                                    {{ menu.name }}
                                                </div>
                                            </div>
                                            <el-button slot="reference" class="jtyj-button-text" type="text">{{
                                                $t("setup.buttonText.download") }}</el-button>
                                        </el-popover>
                                        <el-button class="jtyj-button-text" type="text" style="margin-left: 10px"
                                            @click="addDll(scope.row)">{{ $t("setup.buttonText.edit") }}</el-button>
                                        <el-button class="jtyj-button-text" type="text" @click="delDll(scope.row)">{{
                                            $t("setup.buttonText.delete") }}</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>

                </div>
            </template>
            <template v-else>
                <el-empty description="点击左侧节点展示属性信息"></el-empty>
            </template>


        </div>
        <VersionStatistic v-if="isShowVersionStatistic" ref="showVersionStatisticRef"
            @changeMainVersion="changeMainVersion">
        </VersionStatistic>
        <DataModeling ref="dataModelingRef" :modelId="modelId" :modelName="modelName"
            :mainVersionId="versionForm.mainVersionId">
        </DataModeling>
        <DataReference ref="dataReferenceRef" :modelId="modelId" :modelName="modelName"
            :mainVersionId="versionForm.mainVersionId">
        </DataReference>
    </div>
</template>

<script>
import DigitalMachinePaper from './digital-machine-paper.vue';
import VersionStatistic from "../version-statistics.vue";
import DataModeling from "../data-modeling.vue";
import DataReference from "../data-reference.vue";
export default {
    data() {
        return {
            digitalMachineId: null,
            form: { name: '' },
            curSelectNodeId: null,
            isMasterNode: false,
            parametricModelingList: [], // 参数化建模
            dllOptions: [], // 模型动态链接库
            mainVersionOptions: [], // 版本列表
            versionForm: {
                mainVersionId: null,
                mainVersionCode: null,
                mainVersionDescription: null,
                mainVersionState: 0,
            },
            isShowVersionStatistic: false, // 控制版本统计是否展示

        }
    },
    components: {
        DigitalMachinePaper,
        DataModeling,
        DataReference
    },
    created() {
        // 获取 query 中的 digitalMachineId
        this.digitalMachineId = Number(this.$route.query.digitalMachineId);
    },
    methods: {
        // 节点点击
        handleNodeClick(nodeData) {
            this.form.name = nodeData.data.name;
            this.curSelectNodeId = nodeData.id;
            this.isMasterNode = nodeData.data.category == "主节点";
        },
        // 节点删除
        handelNodeRemove() {
            this.curSelectNodeId = null;
        },
        updateNodeName() {
            console.log(this.form.name);
        },

        changeMainVersion(item) {
            this.handleChangeMainVersion(item.mainVersionId)
            this.isShowVersionStatistic = false
        },
        // 切换主版本
        handleChangeMainVersion(mainVersionId) {
            const target = this.mainVersionOptions.filter(
                (item) => item.mainVersionId == mainVersionId
            );
            if (target[0]) {
                this.versionForm.mainVersionId = target[0].mainVersionId;
                this.versionForm.mainVersionCode = target[0].mainVersionCode;
                this.versionForm.mainVersionState = target[0].mainVersionState;
                this.versionForm.defaultVersion = target[0].defaultVersion;
                this.versionForm.mainVersionDescription = target[0].mainVersionDescription;
                this.dllId = null;
                this.getParametricModelingList();
                this.getDllList();
            }
        },
        handleChangeMainVersionState(mainVersionState) {
            this.$nextTick(() => {
                this.$forceUpdate();
            })
            const target = this.mainVersionOptions.filter(
                (item) => item.mainVersionId == this.versionForm.mainVersionId
            );
            if (!target[0]) return;
            updateMainVersion({
                ...target[0],
                mainVersionState: mainVersionState
            }).then((response) => {
                if (response.code == 200) {
                    this.$message.success(
                        this.$toolHandle.getI18nName(
                            this.$zh.setup.responseText,
                            this.$en.setup.responseText,
                            this.$i18n.locale,
                            "success"
                        )
                    );
                }
            });
        },
        // 设置默认主版本
        setDefaultMainVersion() {
            setDefaultMainVersion({
                mainVersionId: this.versionForm.mainVersionId,
            }).then((response) => {
                if (response.code == 200) {
                    this.$message.success(
                        this.$toolHandle.getI18nName(
                            this.$zh.setup.responseText,
                            this.$en.setup.responseText,
                            this.$i18n.locale,
                            "success"
                        )
                    );
                    this.getMainVersionList(true);
                }
            });
        },
        // 新增版本
        addMainVersion() {
            this.isAddMainVersion = true;
            this.$nextTick(() => {
                this.$refs.addMainVersionRef.init();
            });
        },
        // 修改版本信息
        handlechange(val) {
            const target = this.mainVersionOptions.filter(
                (item) => item.mainVersionId == this.versionForm.mainVersionId
            );
            if (target[0]) {
                updateMainVersion({
                    ...target[0],
                    mainVersionDescription: val,
                }).then((response) => {
                    if (response.code == 200) {
                        this.$message.success(
                            this.$toolHandle.getI18nName(
                                this.$zh.setup.responseText,
                                this.$en.setup.responseText,
                                this.$i18n.locale,
                                "success"
                            )
                        );
                    }
                });
            }
        },
        // 删除版本
        handleDelMainVersion() {
            const target = this.mainVersionOptions.filter(
                (item) => item.mainVersionId == this.versionForm.mainVersionId
            );
            this.$confirm(`确定删除版本  ${target[0].mainVersionName} ?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                customClass: "message-box-style",
                type: "warning",
            })
                .then(() => {
                    delMainVersion(target[0].mainVersionId).then((response) => {
                        if (response.code == 200) {
                            this.$message.success(
                                this.$toolHandle.getI18nName(
                                    this.$zh.setup.responseText,
                                    this.$en.setup.responseText,
                                    this.$i18n.locale,
                                    "success"
                                )
                            );
                            this.getMainVersionList(true);
                        }
                    });
                })
                .catch(() => { });
        },
        // 版本统计
        showVersionStatistic() {
            this.isShowVersionStatistic = true;
            this.$nextTick(() => {
                this.$refs.showVersionStatisticRef.init(this.mainVersionOptions);
            });
        },
        // 数据建模按钮回调
        dataModeling() {
            this.$refs.dataModelingRef.init();
        },

        // 数据引用按钮回调
        dataReference() {
            this.$refs.dataReferenceRef.init();
        },
        // 获取模型动态链接库
        getDllList() {
            getDllList({
                mainVersionId: this.versionForm.mainVersionId,
                modelId: this.modelId,
            }).then((response) => {
                if (response.code == 200) {
                    if (Array.isArray(response.rows)) {
                        this.dllOptions = response.rows;
                        if (this.dllOptions.length > 0) {
                            const target = this.dllOptions.filter(
                                (item) => item.defaultVersion == true
                            );
                            if (target[0]) {
                                this.dllId = target[0].dllId;
                            } else {
                                this.dllId = this.dllOptions[0].dllId;
                            }
                        }
                    }
                }
            });
        },
        // 获取模型动态链接库版本的文件名
        getFileName(filePath) {
            return !filePath ? "" : filePath.split("/").pop();
        },
        // 设置默认模型动态链接库版本
        setDefaultDll(row) {
            setDefaultDll({
                dllId: row.dllId,
            }).then((response) => {
                if (response.code == 200) {
                    this.$message.success(
                        this.$toolHandle.getI18nName(
                            this.$zh.setup.responseText,
                            this.$en.setup.responseText,
                            this.$i18n.locale,
                            "success"
                        )
                    );
                    this.getDllList();
                }
            });
        },
        // 下载模板
        downloadTemplate() {
            const mainVersionId = this.versionForm.mainVersionId;
            const modelId = this.form.modelId;
            this.$download.zip(
                `/model/model/modelDevelopmentDownload?modelId=${modelId}&mainVersionId=${mainVersionId}`,
                `user_template_${new Date().getTime()}.zip`
            )
        },
        // 新增模型动态链接库版本
        addDll(row) {
            this.isAddDll = true;
            this.$nextTick(() => {
                this.$refs.addDllRef.init(row, this.versionForm.mainVersionId);
            });
        },
        // 删除模型动态链接库版本
        delDll(row) {
            this.$confirm(
                `确定删除模型动态链接库版本  ${row.DllNumber} ?`,
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    customClass: "message-box-style",
                    type: "warning",
                }
            )
                .then(() => {
                    delDll(row.dllId).then((response) => {
                        if (response.code == 200) {
                            this.$message.success(
                                this.$toolHandle.getI18nName(
                                    this.$zh.setup.responseText,
                                    this.$en.setup.responseText,
                                    this.$i18n.locale,
                                    "success"
                                )
                            );
                            this.getDllList();
                        }
                    });
                })
                .catch(() => { });
        },
        // 点击上传文件
        handleUpload(e, type, row) {
            this.flag = type;
            this.currentDll = row;
            this.$EventBus.$emit("openUploader", {
                token: getToken(),
                prefixFlag: 2,
                userId: this.userId,
            });
        },
        // 修改模型动态链接库版本信息
        updateDll(form) {
            updateDll({
                ...form,
            }).then((response) => {
                if (response.code == 200) {
                    this.$message.success(
                        this.$toolHandle.getI18nName(
                            this.$zh.setup.responseText,
                            this.$en.setup.responseText,
                            this.$i18n.locale,
                            "success"
                        )
                    );
                    this.getDllList();
                }
            });
        },

        goBack() {
            this.$router.go(-1);
        },

    },
    mounted() {

    }
}
</script>

<style lang="scss" scoped>
.digital-machine-build-container {
    height: 100%;
    width: 100%;
    display: flex;

    .dmb-left {
        width: calc(100% - 600px);
        min-width: 600px;
        height: 100%;

        .dmb-left-title {
            height: 50px;
            width: 100%;
            line-height: 50px;
            font-weight: var(--ui-font-weight-bold);
            border-bottom: 1px solid var(--ui-border-color-base);
        }

        .dmb-left-paper {
            height: calc(100% - 50px);
            width: 100%;
        }

    }

    .dmb-right {
        width: 600px;
        height: 100%;
        border-left: 1px solid var(--ui-border-color-base);

        .dmb-right-title {
            height: 50px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--ui-border-color-base);

            .right-title {
                font-weight: var(--ui-font-weight-bold);
            }

            .back-icon {
                color: var(--ui-text-color);
                font-size: var(--ui-font-size-title);
                margin-right: 20px;
                cursor: pointer;
            }
        }

        .dmb-right-attr {
            height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            border-bottom: 1px solid var(--ui-border-color-base);

            .el-form-item {
                margin-bottom: 0;
            }

        }

        .dmb-right-operate {
            height: 100px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            border-bottom: 1px solid var(--ui-border-color-base);

            .model-detail-middle-box {
                cursor: pointer;
                width: 45%;
                margin-left: 20px;
                font-size: var(--ui-font-size-lg);
                border-radius: 5px;
                display: flex;
                align-items: center;
                background-color: var(--ui-component-background-alt);

                img {
                    height: 30px;
                    width: 30px;
                    padding: 5px;
                    border-radius: 5px;
                    background-color: var(--app-primary-base);
                    margin-right: 10px;
                }
            }
        }

        .dmb-right-model {
            height: calc(100% - 250px);
        }
    }

}
</style>